<template>
  <div>
    <el-form
      :model="entity"
      :rules="rules"
      ref="form"
      label-width="120px"
      class="dialog-form"
    >
      <el-row>
        <el-col :span="8">
          <el-radio-group
            style="width: 200px; margin-left: 56px; margin-top: -10px"
            v-model="entity.queryMode"
          >
            <el-radio :label="10">部门</el-radio>
            <el-radio :label="20">员工</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="16">
          <department-select
            style="width: 289px; margin-left: -114px"
            v-model="entity.departmentId"
            :clearable="false"
          ></department-select>
        </el-col>
        <el-col :span="8">
          <!--<el-input v-if="cls==20" style="width:289px;margin-left: -114px;margin-top: 10px " placeholder='员工' v-model='entity.employee.name'>                 </el-input>-->
          <employee-select
            ref="employee-select"
            :disabled="entity.queryMode != 20"
            :fnChange="search"
            v-model="entity.employeeId"
            style="width: 289px; margin-left: -114px; margin-top: 10px"
            :departmentId="entity.departmentId"
            :clearable="true"
          ></employee-select>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="日期">
            <el-date-picker
              style="width: 289px"
              v-model="entity.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="周期" prop="periodId">
          <period-select
            :fnChange="buildDataRanges"
            ref="periodSelect"
            v-model="entity.periodId"
            :clearable="true"
          ></period-select>
        </el-form-item>
        </el-col>

      </el-row>
      <el-row>

        <el-col :span="12">
          <el-form-item label=" ">
            <el-button
              style="margin-left: -1px"
              type="primary"
              plain
              @click="deleteByRange"
            >
              <span style="color: red"> 删除考勤 </span>
            </el-button>
          </el-form-item>
        </el-col>
  <!--
        <el-col :span="12">
          <el-form-item label=" ">
            <el-checkbox style="margin-left: -82px" v-model="entity.noholiday"
              >不排节日、周休日</el-checkbox
            >
          </el-form-item>
        </el-col>
 -->
      </el-row>
     <!--  <el-row>
        <el-col :span="10">
          <el-form-item
            style="width: 100%; margin-top: 1px"
            label="班次1周期:天"
            prop="days1"
          >
            <el-input
              placeholder="连班天数，包括休息"
              v-model="entity.classMaster1.days"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            style="width: 100%; margin-top: 1px"
            label="班次"
            prop="classMasterId1"
          >
            <el-button
              style="width: 100%"
              type="primary"
              plain
              @click="findClass(1)"
            >
              {{
                entity.classMaster1.name
                  ? entity.classMaster1.name
                  : "请选择班次"
              }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item style="width: 100%" label="班次2周期:天" prop="days2">
            <el-input
              placeholder="连班天数，包括休息"
              v-model="entity.classMaster2.days"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="班次" prop="classMasterId2">
            <el-button
              :disabled="entity.classMaster2.days < 1"
              style="width: 100%"
              type="primary"
              plain
              @click="findClass(2)"
            >
              {{
                entity.classMaster2.name
                  ? entity.classMaster2.name
                  : "请选择班次"
              }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item style="width: 100%" label="班次3周期:天" prop="days3">
            <el-input
              placeholder="连班天数，包括休息"
              v-model="entity.classMaster3.days"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item style="width: 100%" label="班次" prop="classMasterId3">
            <el-button
              :disabled="entity.classMaster3.days < 1"
              style="width: 100%"
              type="primary"
              plain
              @click="findClass(3)"
            >
              {{
                entity.classMaster3.name
                  ? entity.classMaster3.name
                  : "请选择班次"
              }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-row> -->
    </el-form>
    <v-dialog ref="formDiag" :appendToBody="true" title="查找" :width="'48%'">
      <class-master-find
        v-model="entity.classMasterId"
        :classNumber="classNumber"
        :confirmFind="confirmFind"
        :cancelFind="cancelFind"
      >
        <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
        <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
      </class-master-find>
    </v-dialog>
  </div>
</template>
<style lang="less" scoped>
.merchantLogo .el-upload-dragger {
  img {
    height: 200px !important;
  }
}

.dialog-form {
  .el-radio-group {
    .el-radio {
      display: flex;
      align-items: center;
    }

    label {
      height: 40px;
    }
    .group-text {
      display: inline-block;
      width: 100px;
    }
    .title-text {
      display: inline-block;
      width: 120px;
    }
  }
}
</style>

<script>
const defaultEntity = {
  classCount: 1,
  periodId: null,
  queryMode: 10, //department
  departmentId: null, // 部门标识

  dateRange: [],
  employeeId: null, //  员工标识
  employee: { name: "" },

  noholiday: true,

  classMaster1: {
    classMasterId: -1,
    name: "请选择班次",
    days: 1,
  },
  classMaster2: {
    classMasterId: -1,
    name,
    days: 0,
  },
  classMaster3: {
    classMasterId: -1,
    name: "请选择班次",
    days: 0,
  },
};
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import ClassMasterFind from "@/components/widgets/attend/ClassMasterMultiSelect.vue";

import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
export default {
  components: {PeriodSelect, EmployeeSelect, DepartmentSelect, ClassMasterFind },
  data() {
    return {
      cls: 10,
      classNumber: 1,
      parentId: 0,
      ruleTpl: { when: null, then: null },
      entity: _.cloneDeep(defaultEntity),
      dateRange: [],
      oldProps: [],
      ruleDefs: [],
      isDisabled: false,
      limitTotal: false,
      rules: {
        custNo: [
          { required: true, message: "编号不能为空", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1 到 6 个字符",
            trigger: "blur",
          },
        ],

        startOn: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: "blur",
          },
        ],
        merchantId: [
          {
            type: "number",
          },
        ],
        status: [
          {
            type: "number",
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
     buildDataRanges() {
      if (this.entity.periodId) {
        this.$api.attend.attend.PeriodService.findById(
          this.entity.periodId
        ).then((r) => {
          if (r.data != null) {
            this.entity.dateRange = [r.data.startDay, r.data.endDay];
            return;
          }
        });
      }
    },

    search() {},
    findClass(classNumber) {
      this.classNumber = classNumber;
      this.$refs.formDiag.show();
    },
    confirmFind(row) {
      this.$refs.formDiag.hide();
      var classMaster = row;
      // this.$api.attend.attend.ClassMasterService.findById(row.classMasterId).then(rsp => {

      // })
      console.log("classMaster:");
      console.log(JSON.stringify(classMaster));
      this.entity.classCount = 3;
      if (this.classNumber === 1) {
        this.entity.classMaster1.classMasterId = classMaster.classMasterId;
        this.entity.classMaster1.name = classMaster.name;
      }
      if (this.classNumber === 2) {
        this.entity.classMaster2.classMasterId = classMaster.classMasterId;
        this.entity.classMaster2.name = classMaster.name;
      }
      if (this.classNumber === 3) {
        this.entity.classMaster3.classMasterId = classMaster.classMasterId;
        this.entity.classMaster3.name = classMaster.name;
      }
      console.log("entity:");
      console.log(JSON.stringify(this.entity));
    },
    cancelFind() {
      this.$refs.formDiag.hide();
    },
    getProps(scope) {
      return this.entity.props.filter((p) => p.propScope == scope);
    },
    onRuleDefsLoaded(opts) {
      this.ruleDefs = opts || [];
      this.resetProps();
    },
    onDiscountTypeChange(val) {},
    resetProps() {},
    setValues(vals) {
      this.resetEntity = _.cloneDeep(vals);
      this.entity = _.cloneDeep(this.resetEntity);
    },
    //根据部门，日期范围删除
    deleteByRange() {
      this.$confirm("确定删除排班吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.$api.attend.attend.SegmentService.deleteByRange(this.entity).then(
          (rsp) => {
            this.$msgJsonResult(rsp);
          }
        );
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = Object.assign({}, this.entity);
          //排班
          this.$api.attend.attend.SegmentService.computeSegment(this.entity).then((rsp) => {
            this.$msgJsonResult(rsp);
            if (rsp.code === 200) {
              this.$emit("saved", rsp);
            }
          });
        }
      });
    },
    resetForm() {
      //this.$refs["form"].resetFields();
      this.entity = _.cloneDeep(defaultEntity);
      this.entity.dateRange = [
        this.$dongxwDict.formatDateZero(new Date()),
        this.$dongxwDict.formatDateZero(new Date()),
      ];
    },

    init(options) {
      this.resetForm();

      if (options.employeeClassId) {
        this.$api.attend.attend.EmployeeClassService.findById(
          options.employeeClassId
        ).then((r) => {
          this.entity = r.data;
        });
      } else {
        if (options.departmentId) {
          this.entity.departmentId = options.departmentId;
        }
        this.isDisabled = false;
      }
    },
  },
  mounted() {
    this.$on("init", this.init);
    this.$on("submit", this.submitForm);
  },
};
</script>
